<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml" xmlns:hh="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.css" >
    <link rel="stylesheet" href="../statics/css/style.css">
</head>
<body>

<div id="background" class="wall">
    <div class="ui container">
        <div class="ui top aligned teal segment">
            <p class="ui center aligned attached">CRUD</p>
        </div>
        <div th:replace="common/all :: menu(12)" class="ui top attached segment">
            <div class="ui container">
                <div class="ui secondary menu">
                    <div class="ui pointing dropdown link item" style="background-color:#efeff5">
                        <span class="text">系统管理</span>
                        <i class="dropdown icon"></i>
                        <div class="menu m-opacity-mini">
                            <a class="item" data-value="用户管理">用户管理</a><div class="ui divider"></div>
                            <a class="item" data-value="角色管理">角色管理</a><div class="ui divider"></div>
                            <a class="item" data-value="系统日志">系统日志</a><div class="ui divider"></div>
                            <a class="item" data-value="权限管理">权限管理</a>
                        </div>
                    </div>
                    <div class="ui pointing dropdown link item" style="background-color:#efeff5">
                        <span class="text">课程模块</span>
                        <i class="dropdown icon"></i>
                        <div class="menu m-opacity-mini">
                            <a class="item" data-value="课程管理">课程管理</a><div class="ui divider"></div>
                            <a class="item" data-value="课程变更申请">课程变更申请</a><div class="ui divider"></div>
                            <a class="item" data-value="课程信息呈现">课程信息呈现</a>
                        </div>
                    </div>
                    <div class="ui pointing dropdown link item" style="background-color:#efeff5">
                        <span class="text">课程类目模块</span>
                        <i class="dropdown icon"></i>
                        <div class="menu m-opacity-mini">
                            <a class="item">课程类目管理</a><div class="ui divider"></div>
                            <a class="item">课程类目呈现</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="ui  attached aligned segment">
            <div class="ui" id="back">
                <div id="ser_box" class="ui action input">
                    <input type="text"  id="ipt" name="username" placeholder="">
                    <button  id="search-btn" type="button" class="ui teal button">搜索</button>
                </div>
                <div id="bot_box">
                    <ul id="oul"></ul>
                </div>
            </div>
        </div>
        <div class="ui attached aligned segment">
            <div class="ui vertical menu" style="width: 130px;border-color: lightskyblue;border: 0.4px solid lightskyblue">
                <div class="ui dropdown item"><i class="chevron right icon"></i> 显示选项
                    <div class="ui vertical menu" style="width: 130px;border-color: lightskyblue;border: 0.4px solid lightskyblue">
                        <div class="header" style="font-size: 17px">课程类目</div>
                        <div class="ui dropdown item">显示选项<i class="chevron right icon"></i>
                            <div class="ui vertical menu" style="width: 130px;border-color: lightskyblue;border: 0.4px solid lightskyblue">
                                <div class="header" style="font-size: 17px">课程</div>
                                <div class="item">小</div>
                                <div class="item">中</div>
                                <div class="item">大</div>
                            </div>
                        </div>
                        <div class="ui dropdown item">显示选项<i class="chevron right icon"></i>
                            <div class="ui vertical menu" style="width: 130px;border-color: lightskyblue;border: 0.4px solid lightskyblue">
                                <div class="header" style="font-size: 17px">课程</div>
                                <div class="item">小</div>
                                <div class="item">中</div>
                                <div class="item">大</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div id="table-container" class="ui attached segment">
            <table th:fragment="blogList" class="ui orange center celled table">
                <thead>
                <tr>
                    <th></th>
                    <th>资源审核状态</th>
                    <th>资源名称</th>
                    <th>资源上传人</th>
                    <th>资源大小</th>
                    <th>资源上传时间</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>
                <tr th:each="item : ${resource.list}">
                    <td></td>
                    <td th:text="${item.resource_status}">刻意练习清单</td>
                    <td th:text="${item.resource_name}">刻意练习清单</td>
                    <td th:text="${item.resource_uploader}">刻意练习清单</td>
                    <td th:text="${item.resource_size}">刻意练习清单</td>
                    <td th:text="${#dates.format(item.resource_creatTime,'yyyy-MM-dd HH:mm:ss')}">刻意练习清单</td>
                    <td>
                        <a href="#" class="ui mini teal basic button" th:href="@{/updateSource-input/{id}(id=${item.resource_id})}">编辑</a>
                        <a href="#" class="ui mini red basic button" th:href="@{/deleteSource/{id}(id=${item.resource_id})}">删除</a>
                    </td>
                </tr>
                </tbody>
                <tfoot>
                <tr>
                    <th colspan="16">
                        <div class="ui mini pagination menu" th:if="${resource.total}>1">
                            <a class=" item" th:href="@{'/resource?page='+${resource.prePage}}" th:unless="${resource.isFirstPage}">上一页</a>
                            <a class=" item" th:href="@{'/resource?page='+${resource.nextPage}}" th:unless="${resource.isLastPage}">下一页</a>
                        </div>
                        <a href="#" class="ui mini right floated teal basic button" th:href="@{/resource-input}">新增</a>
                    </th>
                </tr>
                </tfoot>
            </table>
            <!--blogList为局部需要更新的数据区域-->
        </div>
        <div class="ui mini negative message" th:unless="${#strings.isEmpty(message)}" th:text="${message}">用户名和密码错误</div>
    </div>

</div>
<div id="midground" class="wall"></div>
<div id="foreground" class="wall"></div>
<script src="/js/style.js" type="text/javascript" charset="utf-8"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.js"></script>
<script>
    $('#search-btn').click(function () {
        $("#bot_box").css("display","none");
        loaddata();
    });
    function loaddata() {
        $("#table-container").load(/*[[@{/main/search}]]*/"/main/search",{
            username : $("[name='username']").val()
        });
    }
    $(document).ready(function(){
        $("#back").mouseover(function(){
            $("#bot_box").css("display","block");
        });
        $("#back").mouseout(function(){
            $("#bot_box").css("display","none");
        });
    });
    $('.dropdown')
        .dropdown({
            clearable: true
        });
</script>
</body>
</html>